import Taro, {Component} from '@tarojs/taro'
import {View, Text, Swiper, SwiperItem, Image} from '@tarojs/components'
import { getRuntime } from "../../utils/common";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'

import FooterInfo from '../../components/FooterInfo'
import FooterMenu from '../../components/FooterMenu'
import './index.less'

import banner_01 from '../../assets/img/banner_01.jpg'
import nav_02 from '../../assets/img/nav_11.png'
import nav_03 from '../../assets/img/nav_12.png'
import nav_04 from '../../assets/img/nav_13.png'
import nav_05 from '../../assets/img/nav_14.png'
import nav_06 from '../../assets/img/nav_15.png'
import nav_07 from '../../assets/img/nav_07.png'
import nav_08 from '../../assets/img/nav_08.png'
import nav_09 from '../../assets/img/nav_09.png'
import nav_10 from '../../assets/img/nav_10.png'
import icon_01 from '../../assets/img/icon_01.png'
import icon_02 from '../../assets/img/icon_02.png'
import icon_03 from '../../assets/img/icon_03.png'
import icon_05 from '../../assets/img/icon_05.png'
import icon_24 from '../../assets/img/icon_24.png'



interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Index extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    upBanners: [
      { id: 1, picture: banner_01 },
      { id: 2, picture: banner_01 }
    ]
  }

  componentWillMount() {
    console.log('首次进入页面执行')
    Taro.setNavigationBarTitle({title: '信用卡还款'})
  }

  componentDidMount() {

  }


  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  componentWillUnmount() {
  }

  componentDidShow() {
    console.log('页面显示执行')
  }

  componentDidHide() {
  }

  render() {
    let { upBanners } = this.state
    return (
      <View className='index card-index'>
        <View className='swiper-wrap'>
          <Swiper className='swiper' indicatorColor='#eeeeee' indicatorActiveColor='#fff'
                  indicatorDots
          >
            {upBanners && upBanners.map(item => {
              return (
                <SwiperItem className='swiper-item' key={item.id}>
                  <Image className='swiper-img' src={item.picture} onClick={this.link.bind(this, item.url)} />
                </SwiperItem>
              )
            })}
          </Swiper>
        </View>
         <View className='index-nav content-30 pt0'>
           <View className='index-nav__item' onClick={this.link.bind(this,'/pages/card/creditCard')}>
             <Image className='index-nav__icon' src={nav_02}/>
             <Text className='index-nav__title'>智能还款</Text>
           </View>
           <View className='index-nav__item' onClick={this.link.bind(this,'/pages/card/manualRepayment')}>
             <Image className='index-nav__icon' src={nav_03}/>
             <Text className='index-nav__title'>手动还款</Text>
           </View>
           <View className='index-nav__item' onClick={this.link.bind(this,'/pages/card/receive')}>
             <Image className='index-nav__icon' src={nav_04}/>
             <Text className='index-nav__title'>智能收款</Text>
           </View>
           <View className='index-nav__item' onClick={this.link.bind(this,'/pages/card/repaymentRecord')}>
             <Image className='index-nav__icon' src={nav_05}/>
             <Text className='index-nav__title'>还款明细</Text>
           </View>
           <View className='index-nav__item' onClick={this.link.bind(this,'/pages/card/paymentRecord')}>
             <Image className='index-nav__icon' src={nav_06}/>
             <Text className='index-nav__title'>收款明细</Text>
           </View>
         </View>



        <View className='service-process content-30'>
          <View className='service-process-title'>使用教程</View>
          <View className='list-05-item'>
            <Image className='left-img' src={require('../../assets/img/img_01.jpg')} />
            <View className='right'>
              <View className='title'>怎么样实名认证？</View>
              <View className='desc'>新用户实名认证步骤流程</View>
            </View>
          </View>

          <View className='list-05-item'>
            <Image className='left-img' src={require('../../assets/img/img_02.jpg')} />
            <View className='right'>
              <View className='title'>怎么样实名认证？</View>
              <View className='desc'>新用户实名认证步骤流程</View>
            </View>
          </View>

          <View className='list-05-item'>
            <Image className='left-img' src={require('../../assets/img/img_03.jpg')} />
            <View className='right'>
              <View className='title'>怎么样实名认证？</View>
              <View className='desc'>新用户实名认证步骤流程</View>
            </View>
          </View>
        </View>

        <FooterInfo />

        <View className='footer-block'  />

        <FooterMenu currentMenu='index' />

      </View>
    )
  }
}

export default Index
